<template>
  <div id="institutionManage">
    <div class="institution-title">
      <div class="text">机构管理</div>
      <div class="addInstitution" @click="addInstitution()">创建机构/部门</div>
    </div>

    <div class="section-block">
      <!-- 筛选区域 -->
      <div class="filter-section">
        <div class="filter-item">
          <label class="filter-label">选择机构</label>
          <el-select
            v-model="selectedInstitution"
            placeholder="请选择"
            class="filter-select"
          >
            <el-option
              v-for="item in institutionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div class="filter-item">
          <label class="filter-label">选择部门</label>
          <el-select
            v-model="selectedDepartment"
            placeholder="请选择"
            class="filter-select"
          >
            <el-option
              v-for="item in departmentOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <el-button type="primary" class="search-btn" @click="handleSearch"
          >搜索</el-button
        >
      </div>

      <!-- 表格区域 -->
      <div class="table-section">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            prop="institutionName"
            label="机构名称"
            align="center"
          />
          <el-table-column prop="department" label="部门" align="center" />
          <el-table-column prop="contact" label="联系人" align="center" />
          <el-table-column prop="peopleCount" label="人数" align="center" />
          <el-table-column
            prop="validDate"
            label="使用有效日期"
            width="200"
            align="center"
          />
          <el-table-column label="操作" align="center" width="280">
            <template #default="scope">
              <div class="action-btns">
                <el-button
                  link
                  type="primary"
                  class="action-btn group-info-btn"
                  @click="handleGroupInfo(scope.row)"
                >
                  <img
                    src="@/assets/img/institutionManagement/group-icon.png"
                    alt=""
                  />
                  小组信息
                </el-button>
                <el-button
                  link
                  type="primary"
                  class="action-btn edit-btn"
                  @click="handleEdit(scope.row)"
                >
                  <el-icon><Edit /></el-icon>
                  修改
                </el-button>
                <el-button
                  link
                  type="danger"
                  class="action-btn delete-btn"
                  @click="handleDelete(scope.row)"
                >
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页区域 -->
      <div class="pagination-section">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 创建机构/部门弹窗 -->
    <el-dialog
      v-model="showAddOrEditDialog"
      width="680px"
      :close-on-click-modal="false"
    >
      <div class="addOrEditDialog">
        <el-form :model="form" label-width="120px" :rules="rules">
          <el-form-item label="机构名称" prop="institutionName">
            <el-input
              v-model="form.institutionName"
              placeholder="请输入机构名称"
            />
          </el-form-item>
          <el-form-item label="部门名称" prop="departmentName">
            <el-input
              v-model="form.departmentName"
              placeholder="请输入部门名称"
            />
          </el-form-item>
          <el-form-item label="联系人" prop="contact">
            <el-input v-model="form.contact" placeholder="请输入联系人" />
          </el-form-item>
          <el-form-item
            label="使用有效时期"
            prop="validDate"
            class="my-data-picker-item"
          >
            <el-date-picker
              v-model="form.validDate"
              type="datetimerange"
              format="YYYY-MM-DD hh:mm:ss"
              value-format="YYYY-MM-DD hh:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="saveAddOrEdit()" color="#155EEF"
            >保存</el-button
          >
          <el-button size="small" @click="showAddOrEditDialog = false"
            >取消</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedInstitution: "四川财经",
      selectedDepartment: "金融学院",
      institutionOptions: [
        { value: "四川财经", label: "四川财经" },
        { value: "北京大学", label: "北京大学" },
        { value: "清华大学", label: "清华大学" },
      ],
      departmentOptions: [
        { value: "金融学院", label: "金融学院" },
        { value: "经济学院", label: "经济学院" },
        { value: "管理学院", label: "管理学院" },
      ],
      tableData: [
        {
          institutionName: "四川财经",
          department: "金融学院",
          contact: "李明",
          peopleCount: 50,
          validDate: "2025/10/11-2025/11/11",
        },
        {
          institutionName: "四川财经",
          department: "金融学院",
          contact: "李明",
          peopleCount: 50,
          validDate: "2025/10/11-2025/11/11",
        },
        {
          institutionName: "四川财经",
          department: "金融学院",
          contact: "李明",
          peopleCount: 50,
          validDate: "2025/10/11-2025/11/11",
        },
        {
          institutionName: "四川财经",
          department: "金融学院",
          contact: "李明",
          peopleCount: 50,
          validDate: "2025/10/11-2025/11/11",
        },
        {
          institutionName: "四川财经",
          department: "金融学院",
          contact: "李明",
          peopleCount: 50,
          validDate: "2025/10/11-2025/11/11",
        },
        {
          institutionName: "四川财经",
          department: "金融学院",
          contact: "李明",
          peopleCount: 50,
          validDate: "2025/10/11-2025/11/11",
        },
        {
          institutionName: "四川财经",
          department: "金融学院",
          contact: "李明",
          peopleCount: 50,
          validDate: "2025/10/11-2025/11/11",
        },
        {
          institutionName: "四川财经",
          department: "金融学院",
          contact: "李明",
          peopleCount: 50,
          validDate: "2025/10/11-2025/11/11",
        },
        {
          institutionName: "四川财经",
          department: "金融学院",
          contact: "李明",
          peopleCount: 50,
          validDate: "2025/10/11-2025/11/11",
        },
        {
          institutionName: "四川财经",
          department: "金融学院",
          contact: "李明",
          peopleCount: 50,
          validDate: "2025/10/11-2025/11/11",
        },
      ],
      form: {
        institutionName: "", // 机构名称
        departmentName: "", // 部门名称
        contact: "", // 联系人
        validDate: "",
      },
      currentPage: 1, // 当前页
      pageSize: 10, // 每页条数
      total: 100, // 总条数
      showAddOrEditDialog: false,
      rules: {
        institutionName: [
          { required: true, message: "请输入机构名称", trigger: "blur" },
        ],
        departmentName: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
        ],
        contact: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        validDate: [
          { required: true, message: "请选择使用有效时期", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    // 创建机构/部门
    addInstitution() {
      this.showAddOrEditDialog = true;
    },
    handleSearch() {
      // 搜索逻辑
      console.log("搜索", this.selectedInstitution, this.selectedDepartment);
    },

    // 查看小组信息
    handleGroupInfo(row) {
      this.$router.push("/institutionManage/groupInfo");
    },
    handleEdit(row) {
      // 修改逻辑
      console.log("修改", row);
    },
    handleDelete(row) {
      // 删除逻辑
      console.log("删除", row);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      // 重新加载数据
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      // 重新加载数据
    },

    // 保存逻辑
    saveAddOrEdit() {
      console.log("保存", this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
#institutionManage {
  width: 1200px;
  margin: 0 auto;

  .institution-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    .text {
      font-weight: bold;
      font-size: 24px;
      color: #0a0a0a;
    }
    .addInstitution {
      padding: 10px 17px;
      background: #4f46e5;
      border-radius: 4px;
      font-size: 16px;
      color: #ffffff;
      text-align: center;
      cursor: pointer;
      &:hover {
        background: #4338ca;
      }
    }
  }

  .section-block {
    padding: 47px 57px 30px 45px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 28px 1px rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    background: #ffffff;
    box-sizing: border-box;

    // 筛选区域
    .filter-section {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 40px;

      .filter-item {
        display: flex;
        align-items: center;
        gap: 10px;

        .filter-label {
          font-size: 14px;
          color: #333333;
          white-space: nowrap;
        }

        .filter-select {
          width: 200px;
        }
      }

      .search-btn {
        margin-left: -10px;
        padding: 10px 30px;
        background: #4f46e5;
        border-color: #4f46e5;
        font-size: 14px;
        border-radius: 4px;
        &:hover {
          background: #4338ca;
          border-color: #4338ca;
        }
      }
    }

    // 表格区域
    .table-section {
      margin-bottom: 30px;

      :deep(.el-table) {
        font-size: 14px;

        .el-table__header th {
          padding: 12px 0;
          font-size: 14px;
          color: #000000;
          background-color: #f3f4f6;
        }

        .el-table__body td {
          padding: 12px 0;
          font-size: 14px;
          color: #000000;
        }
      }

      .action-btns {
        display: flex;
        align-items: center;
        justify-content: center;

        .action-btn {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          font-size: 14px;
          padding: 4px 8px;

          .el-icon {
            font-size: 14px;
            margin-right: 4px;
          }
        }

        .group-info-btn {
          color: #4f46e5;
          img {
            width: 14px;
            height: 12px;
            margin-right: 4px;
          }
        }

        .edit-btn {
          color: #4f46e5;
        }

        .delete-btn {
          color: #ef4444;
        }
      }
    }

    // 分页区域
    .pagination-section {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      :deep(.el-pagination) {
        .btn-prev,
        .btn-next,
        .el-pager li {
          &:hover {
            color: #4f46e5;
          }

          &.is-active,
          &.active {
            color: #4f46e5;
          }
        }
      }
    }
  }

  .addOrEditDialog {
    padding-right: 25px;
    padding-top: 10px;

    .my-data-picker-item {
      width: 80%;
    }
  }
}
</style>